import React,{useState,useEffect} from 'react'



export const Todolist = () => {
    const [val,setVal] = useState('1234');
    const [list, setList] = useState(JSON.parse(localStorage.getItem('todolist')) || []);
    const [num,setNum] = useState(0);
    //useEffect第二该参数传空数组，相当于componentDidMount
    useEffect(()=>{
        //fetch
        const intervalId = setInterval(function(){
            console.log('interval')
            setNum((num)=>num+1);
        },1000)   
        //相当于componentWillunmount
        return ()=>{
            clearInterval(intervalId);
        }
    },[])
    //useEffect第二个参数传入依赖项，相当于componentDidUpDate
    useEffect(()=>{
        console.log(list);
        localStorage.setItem('todolist',JSON.stringify(list));
    },[list])
    return (
        <div>
            {/* 每隔一秒，自动加一 */}
            <h2>{num}</h2>
            <input 
                value={val}
                onChange={e=>setVal(e.target.value)}
                type="text" 
            />
            <button onClick={()=>setList([val,...list])}>添加</button>        
            <ul>
                {
                    list.map((item,index)=><li key={index}>{item}</li>)
                }
            </ul>
            {/* <button onClick={()=>{setList([3,4,5])}}>更新</button> */}
        </div>
    )
}
// export const Todolist = () => {
//     //useState返回的是一个数组，第一项是状态，第二项是更新状态的方法
//     const upDateStu = () => {
//         //setStu是将传进来的实参替换原来的状态
//         setStu({...stu,name: val})
//     }
//     const [val,setVal] = useState('1234');
//     const [stu,setStu] = useState({name:'战三',age:10})
//     return (
//         <div>
//             <div>name:{stu.name}--age:{stu.age}</div>
//             <input
//             value={val}
//             onChange={e=>setVal(e.target.value)}
//             type="text" />
//             <button onClick={upDateStu}>更新学生信息</button>
//             <button>添加</button>        
//         </div>
//     )
// }

